<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>客服设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card>
      <el-form ref="editFormRef" :model="info" label-width="120px">
        <el-form-item label="二维码">
          <el-button type="primary" size="mini" @click="chooseImage"
            >点击上传</el-button
          >
          <input
            @change="photoChange($event)"
            type="file"
            id="upload_file"
            multiple
            style="display: none"
          />
          <div v-if="info.qrcode != ''">
            <img
              class="editIcon"
              :src="'data:image/jpeg;base64,' + info.qrcode"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="btnprimary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "appset",
  data() {
    return {
      info: {
        id: "1",
        qrcode: "",
      },
    };
  },
  created() {
      this.init();
  },
  methods: {
    chooseImage() {
      document.getElementById("upload_file").click(); //触发input-file文件上传控件 事件photoChange
    },
    async photoChange(el) {
      var file = el.target.files[0]; //name: "dangqi1.png" || type: "image/png"
      var type = file.type.split("/")[0];
      if (type === "image") {
        var dataURL = await this.toBase64(file);
        this.info.qrcode = dataURL.split(",")[1];
      } else {
        alert("上传了非图片");
      }
    },
    toBase64(file) {
      return new Promise(function (resolve, reject) {
        //将图片img转化为base64
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          resolve(reader.result);
        };
      });
    },
    async init() {
          const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
     	const {data:res} = await this.$http.post("/customerService/getCustomerService?id="+this.info.id, { });
        if(res.data){
          if(res.data.qrcode) {
            var urlBase = "";
            await this.$base64Img(res.data.qrcode).then((res) => {
              //调用全局方法
              urlBase = res;
            });
            this.info.qrcode = urlBase.split(",")[1];
          }
        }
        
      setTimeout(() => {
        loading.close();
      }, 500);
    },
    async save() {
         const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
        const {data:res} = await this.$http.post("/customerService/updateCustomerService", this.info);
		this.$message.success('设置成功');
         setTimeout(() => {
            loading.close();
        }, 500);
    },
  },
};
</script>

<style>
</style>